customElements.define(
    
    //   <wc-fotter name="111">
    //     <div slot="label">0</div>
    //     <div slot="label">1</div>
    //     <div>2</div>
    //   </wc-fotter>
        'wc-fotter',
        class ButtonElement extends HTMLElement {
            constructor() {
                super();
               
            }
            connectedCallback() {
                this.update(); // 调用 update 方法来应用参数
            }
            // 更新内容的方法
            update() {
                const name = this.getAttribute('name') || 'World';
                // 创建模板内容
                const template = this.getTemplate(name);
                // 创建 Shadow DOM
                const shadow = this.attachShadow({ mode: 'open' });
                // 克隆模板内容并添加到 Shadow DOM
                const templateContent = template.content.cloneNode(true);
                shadow.appendChild(templateContent);
                const button = shadow.querySelector('button'); // 获取内部的button元素
                button.addEventListener('click', () => {
                    alert('Button clicked!'); // 添加点击事件处理函数
                });
            }
            getTemplate(name) {
                const template = document.createElement('template');
                template.innerHTML =
                    `   <style>
                        button {
                            background-color: #4CAF50;
                            border: none;
                            color: white;
                            padding: 15px 32px;
                            text-align: center;
                            text-decoration: none;
                            display: inline-block;
                            font-size: 16px;
                            margin: 4px 2px;
                            cursor: pointer;
                        }
                    </style>
                    <button>
                        ${name}
                        <slot name="label"></slot>
                        <slot></slot>
                    </button>
                `;
                return template;
            }
    
        }
    );
    